<template>
  <div :class="{ plate: true, 'is-check': isCheck, 'has-increase': hasIncrease }">
    <div class="name">{{ name }}</div>
    <div class="increase" v-if="hasIncrease">{{ increase | format }}</div>
    <div class="plate-container">
      <div class="plate-num" v-for="(item, index) in plateData" :key="index">
        <span class="title" v-html="item.label"></span>
        <span class="num" v-html="item.value"></span>
      </div>
    </div>
  </div>
</template>

<script>
import { formatNumber } from '@/scripts/tools.js';
export default {
  props: {
    hasIncrease: {
      type: Boolean,
      default: true,
    },
    isCheck: {
      type: Boolean,
      default: false,
    },
    name: {
      type: String,
      default: '',
    },
    increase: {
      type: String,
      default: '',
    },
    plateData: {
      type: Array,
      default: () => [],
    },
  },
  filters: {
    format(num) {
      return formatNumber(num, '+M.2%');
    },
  },
};
</script>
<style lang="less" scoped>
.plate {
  width: 188px;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  padding: 20px 16px;
  box-sizing: border-box;
  &.is-check {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06);
    &::after {
      position: absolute;
      content: '';
      .bg-mixins;
      background-image: url('//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/42f41994-4793-4ad5-96f4-93cc076c47de.png');
      width: 24px;
      height: 12px;
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  &.has-increase {
    width: 218px;
    height: 208px;
  }
  .name {
    font-family: PingFangSC-Medium;
    font-size: 28px;
    color: rgba(0, 0, 0, 0.84);
    letter-spacing: 0;
    text-align: center;
    line-height: 36px;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .increase {
    font-family: THS-Bold;
    font-size: 36px;
    color: #ff2436;
    letter-spacing: 0;
    text-align: center;
    line-height: 44px;
    font-weight: 700;
    margin-bottom: 16px;
  }
  .plate-container {
    display: flex;
    .plate-num {
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding:0 5px;
      .title {
        font-family: PingFangSC-Regular;
        font-size: 22px;
        color: rgba(0, 0, 0, 0.4);
        letter-spacing: 0;
        line-height: 28px;
        font-weight: 400;
        white-space: nowrap;
        margin-bottom: 8px;
      }
      .num {
        font-family: THS;
        font-size: 22px;
        color: #ff2436;
        letter-spacing: 0;
        line-height: 28px;
        font-weight: 500;
        .typeface {
          font-family: PingFangSC-Regular;
          font-weight: 400;
        }
      }
    }
  }
}
</style>
